$transition_duration: 50ms;
$transition_delay: 350ms;

.kanban-item {
    list-style-type: none;
    margin: 0 10px 12px;
    transition: margin-bottom $transition_duration ease-in-out;

    &.inca_silver .type-border {
        background-color: $inca_silver;
    }
    &.chrome_silver .type-border {
        background-color: $chrome_silver;
    }
    &.fiesta_red .type-border {
        background-color: $fiesta_red;
    }
    &.teddy_brown .type-border {
        background-color: $teddy_brown;
    }
    &.clockwork_orange .type-border {
        background-color: $clockwork_orange;
    }
    &.red_wine .type-border {
        background-color: $red_wine;
    }
    &.acid_green .type-border {
        background-color: $acid_green;
    }
    &.army_green .type-border {
        background-color: $army_green;
    }
    &.sherwood_green .type-border {
        background-color: $sherwood_green;
    }
    &.ocean_turquoise .type-border {
        background-color: $ocean_turquoise;
    }
    &.daphne_blue .type-border {
        background-color: $daphne_blue;
    }
    &.lake_placid_blue .type-border {
        background-color: $lake_placid_blue;
    }
    &.deep_blue .type-border {
        background-color: $deep_blue;
    }
    &.plum_crazy .type-border {
        background-color: $plum_crazy;
    }
    &.peggy_pink .type-border {
        background-color: $peggy_pink;
    }
    &.flamingo_pink .type-border {
        background-color: $flamingo_pink;
    }

    $border-radius-size: 3px;

    &.gu-transit {
        background: #58B359;
        border-radius: $border-radius-size;
        height: 4px;
        margin: 10px;
        opacity: 1;

        > kanban-item {
            display: none;
        }
    }

    &.gu-mirror {
        opacity: 1;

        > kanban-item {
            box-shadow: 0 7px 30px rgba(0, 0, 0, 0.2);
            border: none;
        }
    }

    &.updating {
        > kanban-item {
            background-image: url('loader-mini.gif');
            background-repeat: no-repeat;
            background-position: right 5px bottom 5px;
        }

        .icon-time {
            display: none;
        }
    }

    > kanban-item {
        background: #FFFFFF;
        border-radius: $border-radius-size;
        border: 1px solid #E8E8E8;
        box-shadow: 0px 1px 0px 0px rgba(242, 242, 242, 0.7);
        color: #333;
        cursor: move;
        display: block;
        font-weight: normal;
        position: relative;
    }

    .kanban-item-content {
        padding: 5px 5px 5px 12px;
        transition: padding-bottom $transition_duration ease-in-out;

        > .icon-time {
            position: absolute;
            right: 5px;
            top: 5px;
            cursor: default;
            opacity: 0.2;
            transition: opacity 0.1s linear;

            &:hover {
                opacity: 1;
                transition: opacity 0.1s linear;
            }
        }

        > .moves {
            opacity: 0;
            transition: opacity $transition_duration ease-in-out;
            position: absolute;
            right: -8px;
            top: 50%;
            margin: -22px 0 0 0;
            z-index: 1000;

            > .icon-stack {
                display: block;
                font-size: 11px;
                cursor: pointer;

                > .icon-stack-base {
                    color: #999;
                    transition: color $transition_duration ease-in-out;
                }

                &:hover > .icon-stack-base {
                    color: rgba(#999, 0.8);
                    transition: color $transition_duration ease-in-out;
                }

                &:first-child {
                    margin: 0 0 2px;
                }
            }
        }

        > .type-border {
            position: absolute;
            z-index: 100;
            top: 0;
            left: 0;
            height: 100%;
            width: 5px;
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
        }

        .kanban-item-link {
            position: absolute;
            top: 2px;
            left: 12px;
            color: #999;
            font-size: 0.8em;

            &:hover {
                text-decoration: none;
                opacity: 0.7;
            }
        }

        > .kanban-item-label {
            padding: 20px 0;
            text-align: center;
        }

        @import '../card-fields/card-fields';
    }

    .kanban-item-expand-collapse {
        height: 0;
        background-color: #F5F5F5;
        cursor: pointer;
        box-sizing: border-box;
        transition: height $transition_duration ease-in-out;
        overflow: hidden;
        text-align: center;
        line-height: 0;

        > i {
            position: relative;
            top: 1px;
            font-size: 7px;
        }
    }

    &.compact-view {
        .kanban-item-content {
            padding: 5px 21px 5px 12px;
            text-align: left;

            > .kanban-item-link {
                position: relative;
                top: 0;
                left: 0;
                margin: 0 3px 0 0;

                > .kanban-item-tracker-name {
                    display: none;
                }
            }

            .kanban-item-label {
                display: inline;
                font-size: 0.9em;
            }

            > .icon-time {
                top: 8px;
            }
        }

        &:hover {
            .icon-time {
                right: 15px;
                transition: right $transition_duration ease-in-out $transition_delay;
            }
        }

        ul.extra-card-fields {
            display: none;
        }
    }

    &:first-child {
        margin-top: $kanban-column-header-height + 10px;

        .moves > .icon-stack:first-child {
            visibility: hidden;
        }
    }

    &:last-child {
        margin-bottom: $kanban-column-footer-height + 10px;

        .moves > .icon-stack:last-child {
            visibility: hidden;
        }
    }

    &:only-child:hover {
        > .icon-time {
            right: 5px;
        }

        .moves {
            display: none;
        }
    }

    &:hover {
        margin-bottom: 8px;
        transition: margin-bottom $transition_duration ease-in-out $transition_delay;

        .kanban-item-content {
            padding-bottom: 0;
            transition: padding-bottom $transition_duration ease-in-out $transition_delay;
        }

        .moves {
            opacity: 1;
            transition: opacity $transition_duration ease-in-out $transition_delay;
        }

        .kanban-item-expand-collapse {
            height: 9px;
            transition: height $transition_duration ease-in-out $transition_delay,
            background-color $transition_duration linear;

            &:hover {
                transition: background-color $transition_duration linear;
            }
        }
    }
}

.tooltip > .tooltip-inner {
    width: auto;
    text-align: left;

    > p {
        margin: 0 0 5px;
        white-space: nowrap;

        &:last-child {
            margin: 0;
        }

        > span {
            opacity: 0.8;
        }

        > strong {
            white-space: nowrap;
        }
    }
}

#kanban-board > div.wip-reached ul.kanban-items > li {
    border: 1px solid #F5D5AB;
}
